<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <main>
        <div class="left">
            <img src="./img/index.png" alt="">
        </div>
        <div class="right" id="app"> 
            <div class="form" >
                <h1>菩提阁外卖</h1>
                <form action="/LS02_Impl/employee/selectByUsername" method="post" @submit="tip()">
                    <div v-show="prompt == 'false'" style="color: red;text-align: center;width: 360px;">账号或密码错误</div>
                    <br>
                    <label for="">用户名：</label>
                    <input type="text" name="username" v-model="username">
                    
                    <br>
                    <label for="">密码：</label>
                    <input type="password" name="password" id="password" v-model="password">
                    
                    <br>
                    <input  type="submit" value="登入" class="submit">
                </form>
            </div>


        </div>

    </main>


</body>
<script src="./js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"123",
            username:'',
            password:'',
            prompt:''
        },
        methods: {
            
            tip(e) {
                console.log("点击了");
                e.preventDefault();
                that=this;
                axios.post('http://localhost:8080/LS02_Impl/employee/selectByUsername',"username=" + this.username + "&password=" + this.password)
                .then(res => {

                    that.prompt = res.data;
                    if(that.prompt != "false"){
                        console.log(this.prompt);
                        e.target.submit();
                    }
                })
                .catch(err => {
                    console.error(err); 
                })

            }
        },
        
    })
</script>
</html>